import React, { useState, useEffect } from 'react';
import { Row, Col, message, Radio, Button, Form, Select } from 'antd';
import FormItem from '../../../../components/FormItem';
import SingleFile from '../../../../components/Upload/SingleFile';
import services from '../../../../services/api';
const RadioGroup = Radio.Group;

function Step1(props) {
  const [application, setApplication] = useState([]);
  useEffect(() => {
    services.application.getAppCodeList().then(res => {
      if (res.code === 0) {
        setApplication(res.data);
      }
    });
  }, []);
  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        const formData = new FormData();
        formData.append('strategy_file', values.strategy_file.file);
        formData.append('app_id', values.app_id);
        formData.append('execute_action', values.execute_action);
        services.policy.importFile(formData).then(res => {
          if (res.code === 0) {
            props.goto && props.goto(res.data.file_id);
          } else {
            message.error(res.msg);
          }
        });
      }
    });
  }
  const formItems1 = [
    {
      label: {
        label: '文件上传',
        extra: '格式后缀为.txt的文件'
      },
      name: 'strategy_file',
      options: {
        initialValue: '',
        rules: [{ required: true, message: '请选择要导入的文件' }]
      },
      component: <SingleFile />
    },
    {
      label: {
        label: '将文件导入到'
      },
      name: 'app_id',
      options: {
        initialValue: '',
        rules: [{ required: true, message: '请选择' }]
      },
      component: (
        <Select>
          {application
            .filter(item => item.app_id !== -1)
            .map(it => {
              return (
                <Select.Option key={it.app_id} value={it.app_id}>
                  {it.app_name}
                </Select.Option>
              );
            })}
        </Select>
      )
    },
    {
      label: {
        label: '遇到同名策略/字段/指标:'
      },
      name: 'execute_action',
      options: {
        initialValue: 'rewrite',
        rules: [{ required: true, message: '请选择' }]
      },
      component: (
        <RadioGroup>
          <Radio value={'rewrite'}>执行覆盖操作（文件中数据覆盖风控系统中同名的数据）</Radio>
          <Radio value={'skip'}>执行忽略操作(跳过同名的数据)</Radio>
        </RadioGroup>
      )
    }
  ];
  return (
    <div className='tantuer'>
      <div className='tantuer-form'>
        <Form onSubmit={() => false} className='login-form'>
          <div className='strategy-operater-content'>
            <div style={{ width: '60%', margin: '20px auto 0 auto' }}>
              <Row type='flex'>
                {formItems1.map(item => {
                  return (
                    <Col span={24} key={item.name}>
                      <FormItem form={props.form} item={item} colNum={1} />
                    </Col>
                  );
                })}
              </Row>
            </div>
            <div className='strategy-operater-ft'>
              <Row type='flex' justify='center'>
                <Col span={12} style={{ textAlign: 'center' }}>
                  <Button type='primary' onClick={handleSubmit}>
                    下一步
                  </Button>
                </Col>
              </Row>
            </div>
          </div>
        </Form>
      </div>
    </div>
  );
}

export default Form.create()(Step1);
